<#include "/main.ftl"/>
<body>
<@diamondNav/>
<!-- Morris chart -->
<link rel="stylesheet" href="${base}/lib/adminLte-2.4.5/morris.js/morris.css">

<div id="content" style="margin-left: 10.5%">
    <div id="planSidebar">
        <div style="margin-left: 15px; margin-top: 20px;">
            <div style="font-weight: bold;">
                测试计划分为两种类型:
            </div>
            <div style="font-weight: bold;">
                1.单用例运行
            </div>
            <div style="font-weight: bold;">
                2.多用例组合运行
            </div>
            <div class="btn-group">
                <button class="btn buttonS btn-success btnFont" onclick="testPlan.buildTestPlan();">创建测试计划</button>
            </div>
        <#--<div class="btn-group">-->
        <#--<button class="btn btn-success" onclick="process_plan();">创建测试任务</button>-->
        <#--</div>-->
        </div>
        <input type="hidden" id="buildTestId" value="${buildTestId!}">
        <input type="hidden" id="lastTimeFileSize"> <!--记录日志长度 -->
        <div>
            <div class="divider" style="margin-top: 22px;">
                <span></span>
            </div>
            <div>
                <button class="btn buttonS btn-success btnFont" style="width: auto; padding: 3px 6px; margin-top: -8px;"
                        onclick="planTree.expandAll('planTree')">展开测试计划
                </button>
                <button class="btn buttonS btn-success btnFont" style="width: auto; padding: 3px 6px; margin-top: -8px;"
                        onclick="planTree.collaspeAll('planTree')">收起测试计划
                </button>
            </div>
            <span id='plan_point' class="plan_point">还没有测试计划，来创建一个吧.</span>
            <!-- content -->
            <s:hidden value="%{#request.planJson}" id="planTreeData"></s:hidden>
        <#--<input id="planTreeJson" type="hidden" value="${planTreeJson!}">-->
            <ul id="testPlanTree" class="ztree"></ul>
        </div>
    </div>
    <#--<div>-->
        <#--<hr style="border: 1px solid #a3ff53;height:100%;width: 1px;margin-left: 10px"/>-->
    <#--</div>-->

    <div class="container" style="margin-left: 14%;top: 5%;position: absolute">
        <input type="hidden" id="testPlanId" value="<#if lastTestPlan??>${lastTestPlan.testPlanId!}</#if>">
        <div id="runBuildDiv">
            <#if runningBuildTest??>
                <@writeBuildTest runningBuildTest/>
            </#if>
        </div>
        <#if lastTestPlan??>
            <@topPlan lastTestPlan/>
        <#else >
            <div id="noPlanAlert">
                <span  class="plan_point">还没有测试计划，来创建一个吧.</span>
            </div>
        </#if>
        <@addTestPlan/>
    </div>
    <div style="right: 0px;top:10%;width: 200px;height:100%;border:1px solid #50ff4f;position: absolute">
        <h6 style="margin-top: 0;font-size:14px;font-weight:bold;;line-height:31px">执行历史</h6>
        <table id="historyTable">
            <#if buildTestList??>
                <#list  buildTestList as buildTest>
                <tr>
                    <td>
                    <#switch buildTest.status>
                        <#case 1>
                    <img src="/images/status/green.gif">
                            <#break >
                        <#case 2>
                    <img src="/images/status/red.gif">
                            <#break >
                        <#case 3>
                     <img src="/images/status/yellow.gif">
                            <#break >
                        <#default>
                     <img src="/images/status/blue_anime.gif">
                    </#switch>
                    </td>
                    <td><a onclick="testPlan.goHistory(${buildTest.buildTestId})">#${buildTest.startTime}</a></td>
                </tr>
                </#list>
            </#if>
        </table>
    </div>
</div>
<div class="modal fade" id="myModal" style="overflow: hidden;margin-left: -300px" tabindex="-1" role="dialog"
     aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content" style="width: 900px;height: 500px">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    ×
                </button>
                <h4 class="modal-title" id="myModalLabel">
                    运行日志
                </h4>
            </div>
            <div class="modal-body" id="reportLog" style="width: 99%;height: 400px;overflow: auto">
            </div>
            <div class="modal-body" id="oldReportLog" style="width: 99%;height: 400px;overflow: auto">
            </div>
        </div>
    </div>
</div>
</body>
<script src="${base}/scripts/testPlan/planTree.js"></script>
<!-- Morris.js charts -->
<script src="${base}/lib/adminLte-2.4.5/raphael/raphael.min.js"></script>
<script src="${base}/lib/adminLte-2.4.5/morris.js/morris.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        testPlan.initPage();
        planTree.initTree();
        planTree.getTestPlanTree(${testPlanTree!});
        testPlan.initTestCase();
        <#if buildTestId??>
            $("#topTitle").hide();
             testPlan.buildTestRefresh(${buildTestId!});
         </#if>
        <#if lastTestPlan?? && lastTestPlan.planBuildTestList??>
            var data=[];
                <#list lastTestPlan.planBuildTestList as item>
                         var obj={};
                        obj.startTime ="${item.startTime?date('yyyy-MM-dd')}";
                        obj.caseSize = ${item.caseSize};
                        obj.passRate = "${item.passCaseRate!}";
                        data.push(obj);
                </#list>
                testPlan.buildTrend(data);
        </#if>
    });
</script>
<style type="text/css">
    .plan_point {
        font-weight: bold;
        margin-left: 10px;
    }

    #planSidebar {
        display: block;
        background: url(../../images/base/backgrounds/side-right.jpg) repeat;
        min-height: 600px;
        position: absolute;
        z-index: 999;
        border-right: 1px solid #c3c3c3;
        width: 230px;
        margin-right: 5%;
        height: 100%;
    }


    #content {
        padding-bottom: 60px;
        position: relative;
        padding-top: 5px;
    }

    .table-bordered {
        border: 1px solid #ddd;
    }

    .green {
        color: #4D7F12;
    }

    textarea, input, input[type=text], input[type=password] {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 11px;
    }

    .breadLine {
        clear: both;
        height: 28px;
        box-shadow: 0 1px 0 #fff, 0 1px 0 #fff inset;
        -webkit-box-shadow: 0 1px 0 #fff, 0 1px 0 #fff inset;
        -moz-box-shadow: 0 1px 0 #fff, 0 1px 0 #fff inset;
        background: url(../../images/base/backgrounds/breadcrumbs.png) repeat-x;
        border-top: 1px solid #c3c3c3;
        border-bottom: 1px solid #c3c3c3;
        font-size: 11px;
    }
    .menuDiv{
        margin: 0;
        padding: 0;
        border: 0;
        outline: 0;
        font-size: 100%;
        vertical-align: baseline;
        font-size: 12px;
    }
    .bBlue {
        border: 1px solid #3e76af;
        box-shadow: 0 1px 2px 0 #66b2d2 inset;
        -webkit-box-shadow: 0 1px 2px 0 #66b2d2 inset;
        -moz-box-shadow: 0 1px 2px 0 #66b2d2 inset;
    }
    .bBlue {
        border: 1px solid #3e76af;
        box-shadow: 0 1px 2px 0 #66b2d2 inset;
        -webkit-box-shadow: 0 1px 2px 0 #66b2d2 inset;
        -moz-box-shadow: 0 1px 2px 0 #66b2d2 inset;
    }
    .bBlue {
        border: 1px solid #3e76af;
        box-shadow: 0 1px 2px 0 #66b2d2 inset;
        -webkit-box-shadow: 0 1px 2px 0 #66b2d2 inset;
        -moz-box-shadow: 0 1px 2px 0 #66b2d2 inset;
        background: #5ba5cb;
        background: -moz-linear-gradient(top, #5ba5cb 0%, #3a70ab 100%);
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5ba5cb), color-stop(100%,#3a70ab));
        background: -webkit-linear-gradient(top, #5ba5cb 0%,#3a70ab 100%);
        background: -o-linear-gradient(top, #5ba5cb 0%,#3a70ab 100%);
        background: -ms-linear-gradient(top, #5ba5cb 0%,#3a70ab 100%);
        background: linear-gradient(top, #5ba5cb 0%,#3a70ab 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5ba5cb', endColorstr='#3a70ab',GradientType=0 );
    }
    .buttonS {
        padding: 6px 14px;
    }
    .buttonS, .buttonM, .buttonL, .buttonH, [class*="tablectrl"] {
        font-size: 12px;
        color: #fff;
        font-weight: bold;
        text-shadow: 0 -1px #6f6f6f;
        display: inline-block;
        line-height: 14px;
        border-radius: 2px;
        -webkit-border-radius: 2px;
        -moz-border-radius: 2px;
    }
    button, input[type=submit], input[type=image], input[type=reset] {
        cursor: pointer;
    }
    /*.plan_not_task_point {*/
        /*margin-top: 40px;*/
        /*font-weight: bold;*/
    /*}*/
</style>
